<template>
  <div class="server">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="您好，在线客服为您服务"
        @search="onSearch"
        @cancel="onCancel"
      >
        <template #action>
          <van-icon name="apps-o" />
        </template>
        <template #left-icon>
          <van-icon name="smile-o" />
        </template>
      </van-search>
    </form>
    <div class="menu">
      <div class="menu-list" v-for="item in 8" :key="item">
        <div class="icon"></div>
        <div class="text">我要安装</div>
      </div>
    </div>
    <div class="server-title">服务优选</div>
    <div class="server-list">
      <div class="server-list-item" v-for="item in 2" :key="item">
        <div class="top-title">首发惊喜价9.9元起</div>
        <div class="bottom-title">保值换新补购上线</div>
        <div class="bg-img"></div>
      </div>
    </div>
    <div class="top-nav">
      <div class="server-title">附近服务</div>
      <div class="look-more">查看更多 <van-icon name="arrow" /></div>
    </div>
    <div class="img-box">
      <div class="tip">寻找附近的小米之家</div>
    </div>
    <div class="top-nav">
      <div class="server-title">猜你想问</div>
      <div class="look-more">换一换 <van-icon name="replay" /></div>
    </div>
    <div class="questions">
      <div class="questions-list" v-for="item in 5" :key="item">
        <div class="title">· 我的订单多久发货</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ServerView",
  data() {
    return {
      value: '',
    };
  },
  methods: {
    onSearch(val) {
      this.$toast(val);
    },
    onCancel() {
      this.$toast('取消');
    },
  },
};
</script>

<style lang="scss" scoped>
.server{
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  padding: 60px 10px;
  box-sizing: border-box;
  overflow: auto;
  ::v-deep .van-icon-smile-o{
    color: #bbb;
    font-size: 18px;
  }
  ::v-deep .van-icon-apps-o{
    font-size: 22px;
    position: relative;
    top: 3px;
  }
  ::v-deep .van-search__content--square{
    border-radius: 999px;
    background-color: #fff;
  }
  ::v-deep .van-search--show-action {
    background-color: #f5f5f5;
    position: fixed;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .menu{
    width: 100%;
    height: 180px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .menu-list{
      width: 25%;
      height: 50%;
      .icon{
        width: 35px;
        height: 35px;
        border-radius: 999px;
        margin: 0 auto 10px;
        background: url('@/assets/images/Snipaste_2022-12-20_17-21-14.jpg') no-repeat center center;
        background-size: cover;
      }
    }
  }
  .server-title{
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    margin: 20px 0 10px;
  }
  .server-list{
    display: flex;
    width: 100%;
    height: 80px;
    justify-content: space-between;
    .server-list-item {
      width: 49%;
      height: 100%;
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;
      padding: 20px 10px;
      box-sizing: border-box;
      text-align: left;
      position: relative;
      .top-title{
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
      }
      .bottom-title{
        font-size: 12px;
        color: #bbb;
      }
      .bg-img{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 50px;
        height: 50px;
        background: url('@/assets/images/Snipaste_2022-12-20_18-15-44.jpg') no-repeat center center;
        background-size: cover;
      }
    }
  }
  .top-nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46px;
    line-height: 46px;
    .look-more{
      color: #bbb;
      position: relative;
      top: 5px;
    }
  }
  .img-box{
    width: 100%;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: url('@/assets/images/t01ac29d6ebc95db5c1.webp.jpg') no-repeat center center;
    background-size: cover;
    .tip{
      width: 140px;
      font-size: 14px;
      color: #fff;
      border-radius: 999px;
      padding: 13px 10px;
      position: absolute;
      left: 0;
      right: 0;
      margin: 22% auto;
      background-color: rgba(0,0,0,.65);
    }
  }
  .questions{
    padding: 0 20px;
    box-sizing: border-box;
    background-color: #fff;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    .questions-list{
      height: 50px;
      text-align: left;
      line-height: 50px;
      .title{
        font-weight: 600;
      }
    }
  }
}
</style>